import React, { Suspense } from 'react';
// import logo from './logo.svg';
import './App.css';
// 导入路由相关依赖
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
// import { isAuth } from './utils/token'
import AuthRoute from './components/AuthRoute'
// 导入子组件
/**
import Login from './views/Login'
import Layout from './views/Layout'
import NotFound from './views/404'
import CityList from './views/CityList'
import Map from './views/Map'
import Detail from './views/Detail'
import Rent from './views/Rent'
import RentSearch from './views/Rent/Search'
import RentAdd from './views/Rent/Add'
 */
// 路由懒加载
const Login = React.lazy(() => import('./views/Login'))
const Layout = React.lazy(() => import('./views/Layout'))
const CityList = React.lazy(() => import('./views/CityList'))
const Map = React.lazy(() => import('./views/Map'))
const Detail = React.lazy(() => import('./views/Detail'))
const Rent = React.lazy(() => import('./views/Rent'))
const RentAdd = React.lazy(() => import('./views/Rent/Add'))
const RentSearch = React.lazy(() => import('./views/Rent/Search'))
const NotFound = React.lazy(() => import('./views/404'))

// 测试redux
// import ReduxIndex from './test/redux'
function App() {
  return (
    <div className="App" style={{ height: "100%" }}>
      <Suspense fallback={<div style={{ textAlign: 'center', marginTop: 180 }}>Loading...</div>}>
        <Router>
          <Switch>
            <Route path="/login" component={Login}></Route>
            <Route path="/layout" component={Layout}></Route>
            <Route path="/citylist" component={CityList}></Route>
            <Route path="/map" component={Map}></Route>

            {/* <Route path="/redux" component={ReduxIndex}></Route> */}
            {/* 动态路由参数 */}
            <Route path="/detail/:id" component={Detail}></Route>
            {/* 这样写，没有进行任何的权限控制 */}
            {/* <Route path='/rent' component={Rent} /> */}
            {/* 权限控制的写法 */}
            {/* <Route exact path='/rent' render={props => {
            if (isAuth()) { // 有权限
              return <Rent {...props} />
            } else { // 无权限
              return <Redirect to={{ pathname: '/login', state: { from: props.location.pathname } }} />
            }
          }} />
          <Route
            path='/rent/add'
            render={props => {
              if (isAuth()) {
                // 有权限
                return <RentAdd {...props} />
              } else {
                // 没有权限
                return (
                  <Redirect
                    to={{
                      pathname: '/login',
                      state: { from: props.location.pathname }
                    }}
                  />
                )
              }
            }}
          /> */}
            {/* 权限控制的写法 */}
            <AuthRoute exact path='/rent' component={Rent} />
            <AuthRoute path='/rent/add' component={RentAdd} />
            <AuthRoute path='/rent/search' component={RentSearch} />
            {/* 方法二
          <AuthRoute exact path='/rent'>
            <Rent />
          </AuthRoute>
          <AuthRoute path='/rent/add'>
            <RentAdd />
          </AuthRoute>
          <AuthRoute path='/rent/search'>
            <RentSearch />
          </AuthRoute> */}
            <Redirect exact from="/" to="layout" />
            <Route component={NotFound} />

          </Switch>
        </Router>
      </Suspense>
    </div>
  );
}

export default App;
